<template>
    <div style="overflow: hidden;height:83vh;margin-bottom: 4vw">
      <pull-to
                 :bottom-load-method="infiniteHandler"
                 :bottom-config="BOTTOM_DEFAULT_CONFIG"
                 class="file-lists">
      <div class="imgBox">
          <div class="holeBox" style="float:left;"   v-for="(v,i) in commendList" :key="i">
            <router-link to="APP">
            <img :src="v.image.img_url" alt="">
            <p>{{v.article_title}}</p>
            <div style="color: #333;font-size: 10px;">
              <img :src="v.head_ico"  alt="" style="border-radius:50%;width:6.67vw;height: 6.67vw;float: left;margin-left: 2vw;margin-bottom: 2vw;">
              <span style="float: left;line-height: 6.8vw;margin-left: 1vw;font-size: 10px;    white-space: nowrap;text-align: left; overflow: hidden;
              text-overflow: ellipsis;width: 22vw;">{{v.user_name}}</span>
              <span style="float: right;margin-top: 0vw;margin-right: 2vw">
                <van-icon name="like-o" size="3.5vw" style="margin-top: 1vw;position: relative;top: 1vw;"/>
                <span style="position:relative;top: 1px;">{{v.thumbs_num}}</span>
              </span>
            </div>
            </router-link>
            <span  class="show-msg" v-show="commendList.all_page==0">这里什么都没有了哦</span>
          </div>
      </div>
      </pull-to>
    </div>
</template>

<script>
  import PullTo from 'vue-pull-to'
    export default {
      name: "goodsCommend",
      props: ['category_id'],
      components: {
        PullTo
      },
      data() {
        return {
          commendList: [],
          reset: [],
          all_page: [],
          pages:1,
          BOTTOM_DEFAULT_CONFIG: {
            pullText: "上滑继续加载",
            triggerText: "释放更新",
            loadingText: "加载中,请稍后",
            doneText: "内容已全部展示了",
            failText: "加载失败",
            loadedStayTime: 1000,
            stayDistance: 50,
            triggerDistance: 50,
            list: ""
          },
        }
      },
      methods: {
        infiniteHandler(loaded) {
          this.pages++;
          console.log(this.pages);
          if (!this.loaded){
            this.$http({
              url: '/super/api/home/getActicle',
              method: 'post',
              data: {
                category_id: this.category_id,
                page: this.pages,
                time: this._globe.time1,
                device_id: this._globe.device_id,
                version: this._globe.version,
                platform: this._globe.platform,
                token: this._globe.token1,
              }
            }).then(response => {
              /* this.$dialog.loading.close();*/
              console.log(response);
              let data = response.data.data;
              this.maxPage = data.all_page;//总页数
              /* this.curpage = data.cur_page;//第一页*/
              if (this.pages <= this.maxPage) {
                /*this.curpage++;*/
                /* console.log(this.curpage);*/
                console.log(this.pages);
                this.commendList = this.commendList.concat(data.list);
                this.BOTTOM_DEFAULT_CONFIG.doneText = this.BOTTOM_DEFAULT_CONFIG.pullText;
                loaded("done");
              } else {
                this.BOTTOM_DEFAULT_CONFIG.doneText = "内容已全部展示";
                //结束刷新功能
                loaded("done");
                this.loaded = true;
              }
            });
          }
        }

      },
      created(){
        var that = this;
        this.$http({
          url: '/super/api/home/getActicle',
          method: 'post',
          data: {
            category_id: this.category_id,
            page: this._globe.page,
            time: this._globe.time1,
            device_id: this._globe.device_id,
            version: this._globe.version,
            platform: this._globe.platform,
            token: this._globe.token1,
          }
        })
          .then(function (response) {
            const resData = response.data;
            if (resData.code == 1) {
              that.commendList = resData.data.list;
              that.reset = resData.data;
              that.all_page = resData.data.all_page;
              /*console.log(that.reset);*/
            }
          })
          .catch(function (response) {
            console.log(response);
          })

      },
    }
</script>

<style scoped lang="scss">

  .file-lists{
    width:100%;
    height: 100%;
  }
  .page{
    width: 92vw;
    margin: 0px auto;
    margin-top: 5vw;
  }
  .imgBox{
    width: 96vw;
    overflow: scroll;
    position:relative;
    margin: 0px auto;
    //column-count: 2;
    //column-gap: 0;
   /* margin-top: 18vw;*/
    .holeBox:nth-child(odd){
      float:left !important;
    }
    .holeBox:nth-child(even){
      float: right !important;
    }
      .holeBox{
        //break-inside: avoid;
        // position: absolute;
        width: 42.67vw;
        height: auto;
        display: inline-block;
        background: #fff;
        box-shadow: 0px 0 5px 2px #f5f5f5;
        border-radius:2vw;
        overflow: hidden;
        margin:2.5vw;
       /* position: absolute;*/
          img{
            width: 42.67vw;
            height:42.67vw;
            display: inline-block;
          }
          p{
            font-size: 15px;
            color: #333;
            text-align: left;
            margin-left:2vw;
            margin-bottom: 2vw;
            height: 10vw;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
      }
  }
  @media screen and(max-width: 375px)and (min-width: 320px){
    p{
      font-size: 13px !important;
    }
  }
</style>
